"use client";

import { useUploadFile } from "@/hooks/useFiles";
import { Upload } from "lucide-react";
import { useRef, useState } from "react";
import { toast } from "sonner";
import { Button } from "./button";

interface UploadAreaProps {
    currentPath: string;
}

export function UploadArea({ currentPath }: UploadAreaProps) {
    const [isDragOver, setIsDragOver] = useState(false);
    const fileInputRef = useRef<HTMLInputElement>(null);
    const uploadMutation = useUploadFile();

    const handleFileSelect = (files: FileList | null) => {
        if (!files) return;

        Array.from(files).forEach((file) => {
            const fileName = file.name.toLowerCase();
            if (!fileName.endsWith(".glb") && !fileName.endsWith(".gltf")) {
                toast.error(`${file.name} 不是支持的模型文件格式`);
                return;
            }

            uploadMutation.mutate(
                { file, path: currentPath },
                {
                    onSuccess: () => {
                        toast.success(`${file.name} 上传成功`);
                    },
                    onError: (error) => {
                        toast.error(`上传失败: ${error.message}`);
                    },
                }
            );
        });
    };

    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragOver(true);
    };

    const handleDragLeave = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragOver(false);
    };

    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault();
        setIsDragOver(false);
        handleFileSelect(e.dataTransfer.files);
    };

    return (
        <div className="w-full">
            <div
                className={`relative border-2 border-dashed rounded-lg p-8 text-center transition-colors ${isDragOver ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50"}`}
                onDragOver={handleDragOver}
                onDragLeave={handleDragLeave}
                onDrop={handleDrop}
            >
                <input ref={fileInputRef} type="file" multiple accept=".glb,.gltf" className="hidden" onChange={(e) => handleFileSelect(e.target.files)} />

                <Upload className="mx-auto h-12 w-12 text-muted-foreground mb-4" />

                <div className="space-y-2">
                    <p className="text-sm font-medium">拖拽模型文件到此处或点击上传</p>
                    <p className="text-sm text-muted-foreground">支持 .glb 和 .gltf 格式</p>
                </div>

                <Button onClick={() => fileInputRef.current?.click()} className="mt-4" disabled={uploadMutation.isPending}>
                    {uploadMutation.isPending ? "上传中..." : "选择文件"}
                </Button>

                {uploadMutation.isPending && (
                    <div className="mt-4">
                        <div className="w-full bg-muted rounded-full h-2">
                            <div className="bg-primary h-2 rounded-full animate-pulse" style={{ width: "60%" }} />
                        </div>
                        <p className="text-xs text-muted-foreground mt-2">正在上传...</p>
                    </div>
                )}
            </div>
        </div>
    );
}
